<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fetch-post</title>
    <script src="../vue2.js"></script>
</head>
<body>
<div id="box">
    <button @click="handleFetch">ajax-fetch</button>
</div>
<script>
    new Vue({
        el: "#box",
        data: {},
        methods: {
            handleFetch() {
                //post-1.表单格式
                fetch("**", {
                    method: 'post',
                    headers: {
                        //需要声明请求头格式
                        "Content-Type": "application/x-www-form-urlencoded"   //或json格式
                    },
                    body: "name=最爱吃兽奶&age=18"   //需要传给后端的数据
                }).then(res => res.json()).then(res => console.log(res)).catch(err => console.log('error'));

                //post-2.json格式
                fetch("**", {
                    method: 'post',
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({    //传给后端的数据要是json格式
                        name: "最爱吃兽奶",
                        age: 18
                    })
                }).then(res => res.json()).then(res => {
                    console.log(res)
                }).catch(err => {
                    console.log('error')
                });
            }
        }
    })
</script>
</body>
</html>